Gebruik deze knoppen om de cubus door het veld te bewegen Je zult zien hoe het perspectief veranderd naarmate je dichter bij de rand komt	3d projectie op een 2d vlak Wat wij 3d noemen is eigenlijk het projecteren van een drie dimensionaal punt op een 2d vlak. De projectielijnen naar het 'oog' worden afgesneden door een 'scherm' wat ertussen zit en als projectievlak dient. Als we weten waar de punten op dit vlak 'zichtbaar' zijn weten we waar ze op het computerscherm komen te staan. De truc is dus om het snijpunt (x,y) te verkrijgen van een rechte tussen oog en gegeven punt met het projectievlak. Dit werkstuk heeft niet als uitgang de beginselen van meetkundige wiskunde uit te leggen. Voor wie geintresseerd is; ik heb het geleerd op http://www.geocities.com/SiliconValley/2151/math3d.html. Een fragment hieruit van de formules die ik zal toepassen Line equation A line can be described as all the points aligned with two points A (0x,0y,0z) and B. That way, it is defined by its origin A and the vector (dx,dy,dz) going from A to B. The equation looks like this: point = org + k * dir or with the coordinates (x,y,z) = (0x,0y,0z) + k * (dx,dy,dz) ,k being any real number. Plane equation A plane is a surface that can be described by a normal vector (dx,dy,dz), ie a direction the plane is facinng, and a value k, indicating the position of the plane along this vector. The equation is: point * normal = k or with the coordinates (x,y,z) * (dx,dy,dz) = k, k being any real number. Intersection of a plane and a line The line equation looks like this: point = org + u * dir. We have to find the value of u corresponding to the intersection. Using the plane equation, we find u = (k - org * normal) / (dir * normal) We then plug this into the line equation and find the coordinates of the point. Ik snapte dit ook pas toen ik het in code omzette ;) In javascript betekend dit een functie als dit: 17 function _3d22d(point) { 18 var persp = (diepte - oog) / (point[2] - oog ); 19 var x2d = ( width / 2 ) + Math.floor( persp * (point[0]) ); 20 var y2d = ( height / 2 ) + Math.floor( persp * (point[1]) ); 21 return(Array(x2d,y2d)) 22 } waarbij persp de factor is om de x en y positie op vlak diepte te verkrijgen van punt point ten opzichte van oogpunt oog. Het is dus maar een kwestie van projecteren eigenlijk.

listing 3dengine in js

      1 var oog = -320
      2 var diepte = -260
      3 var width = 40
      4 var height = 40
      5 var cube = Array( Array(-40,40,40), Arr...

      6 
      7 var fbuffer = makebuffer()
      8 

      9 function makebuffer() {
     10 var fbuffer = Array();
     11 for (var x = 0; x < height; x++) {
     12   fbuffer[x] = Array();
     13 }
     14 return fbuffer;
     15 }
     16 

     17 function _3d22d(point) {
     18   var persp =  (diepte - oog) / (point[2] - oog );
     19   var x2d = ( width / 2 ) + Math.floor( persp * (point[0]) );
     20   var y2d = ( height / 2 ) + Math.floor( persp * (point[1]) );
     21   return(Array(x2d,y2d))
     22 }
     23 

     24 function moveIt(object,step) {
     25  for (var i = 0; i<object.length; i++){
     26   object[i][0] += step[0];
     27   object[i][1] += step[1];
     28   object[i][2] += step[2];
     29  }
     30  return object;
     31 }
     32 

     33 function docube() {
     34  fbuffer = makebuffer();
     35  for (var u=0; u < cube.length; u++) {
     36   var tdc = _3d22d(cube[u]);
     38  }
     39  return fbuffer;
     40 }
     41 

     42 function printbuffer() {
     43  var rtv = "";
     44  for (var i=0; i<fbuffer.length; i++) {
     45   rtv += "\n";
     46   for (var y=0; y<40; y++) {
     47     if (fbuffer[y][i]){
     48       rtv += "o";
     49     } else {
     50       rtv += "_";
     51     }
     52   }
     53  }
     54  document.getElementById('dis').value= rtv;
     55 }
     56 

Bash

om aan te tonen dat het principe in elke programmeertaal hetzelfde blijft een voorbeeld in bash, misschien dat het ooit nog handig gaat zijn voor 3d statistiekjes in een shell te laten draaien of iets dergerlijks.

De functie print3d hieronder krijgt 3 argumenten mee (x, y, z) die hij middels ansi escape sequences op het scherm zet.

    12 print3d () {
    13    echo -ne "\e[$(( $(( ${2} * $(( DIEPTE - OOG  / $(( ${3} - OOG )) ))  )) / 20 ));$(( $(( ${1} * $((  DIEPTE - OOG / $(( ${3} - OOG )) ))  )) / 20 ))Ho"
    14 
    15 }

references

http://developer.netscape.com/viewsource/antar_vrml/antar_vrml.html
http://www.webreference.com/js/column19/realtime.html
http://www.morrowland.com/apron/article/technical/vector/index.php
http://www.morrowland.com/apron/article/general/character%20animation/index.php
http://www.visualbasicforum.com/t105276.html
http://www.flashkit.com/movies/3D/Engines/Advanced-SubDream-2464/index.php
http://tav.kiev.ua/~om/lussier/3d.htm
http://www.flashkit.com/tutorials/3D/3D_Engin-KStor-189/index.php